<template>
  <div class="info-panel">
    <div class="info-row">
      <span class="info-label">坐标:</span>
      <span class="info-value">{{ coordinates.longitude.toFixed(6) }}, {{ coordinates.latitude.toFixed(6) }}</span>
    </div>
    <div class="info-row">
      <span class="info-label">相机:</span>
      <span class="info-value">高度: {{ formatHeight(cameraInfo.height) }} | 方位: {{ cameraInfo.heading }}° | 俯仰: {{ cameraInfo.pitch }}°</span>
    </div>
    <div class="info-row">
      <span class="info-label">模型:</span>
      <span class="info-value">{{ modelInfo }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CoordinateInfo } from '../types/model'

interface CameraInfo {
  height: number
  heading: number
  pitch: number
}

interface Props {
  coordinates: CoordinateInfo
  modelInfo: string
  cameraInfo: CameraInfo
}

defineProps<Props>()

const formatHeight = (height: number): string => {
  if (height >= 1000) {
    return `${(height / 1000).toFixed(1)}km`
  }
  return `${height.toFixed(0)}m`
}
</script>
